/**
 * Created by Administrator on 2017/10/20.
 */
import React from 'react';
import ImgNight from 'assets/img/night.jpg';
import ImgNow from 'assets/img/now.png';
import css from './index.less';
import Data from 'data';
import { Link } from 'react-router-dom';
import {observer, inject, action} from 'mobx-react';
import { Icon } from 'antd';
// import Share from 'components/share';
// import Ques from 'components/ques';
// import Music from 'components/music';
import TopBar from 'components/topBar';
import ImgHuo from 'assets/img/huo.png';
import fen1 from 'assets/img/fen_01.png';
import fen2 from 'assets/img/fen_02.png';
import fen3 from 'assets/img/fen_03.png';
import fen4 from 'assets/img/fen_04.png';
import fen5 from 'assets/img/fen_05.png';
import fen6 from 'assets/img/fen_06.png';
import fen7 from 'assets/img/fen_07.png';
import fen8 from 'assets/img/fen_08.png';

// import {toJS} from 'mobx';

@inject('store')
@observer
export default class Teams extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      palace: Data[props.match.params.palaceId],
      message: [],
    };

  }

  changeStatus() {
    this.props.store.light();

  }

  changeImg() {
    let { isLight } = this.props.store;

    if (isLight === 'true') {
      return (
      <div className={css.bg}>
        <img src={fen1} /><img src={fen2} /><img src={fen3} /><img src={fen4} />
        <img src={fen5} /><img src={fen6} /><img src={fen7} /><img src={fen8} />
      </div>
      );

    } else if (isLight === 'false') {
      return <img src={ImgNight} className={css.bg}/>;
    }

  }


  renderCell(palace, index) {
    const props = {
      className: css.palace,
      to: `/inner/${index}`,
      key: index,
    };
    this.props.store.numChoose(index);

    return (
      <Link {...props} />

    );
  }

  enter() {
    const { num } = this.props.store;
    let k = Math.floor(Math.random() * 6);
    console.log( this.props.store.num[k]);
    this.props.history.push( `/inner/${num[k]}`);
  }

  openMessage() {
    const { mess = [] } = this.props.store;
    // console.log('messageList====123123==', mess);
    let content = '';
    let time = '';
    mess.forEach( item => {
      console.log('item', item);
      content = item.m_content;
      time = item.m_time;

    });

    console.log('time', time);
    const { message } = this.props.store;
    this.props.store.messageChange('true');
    if (message === 'true') {
      return (<div className={css.messageBox}>
        <span>{content}</span>
      </div>);
    }

  }

  // componentWillMount() {
  //   this.time = setInterval(() => {
  //     this.props.store.timer();
  //   }, 1000);
  // }

  componentDidMount() {
    // window.addEventListener('scroll', this.onScrollHandle.bind(this));
    // let { setScrollY } = this.props.store;

    // 顶部消息加载
    // const { mess = [] } = this.props.store;
    // console.log('messageList====123123==', mess);
    // this.message = mess;
    //
    // // let ma = Math.floor(Math.random() * mess.length);
    // // this.message = mess[ma];
    // console.log('item', this.message);
    // this.message.map( (item, index) => {
    //   console.log('item', item);
    // } );


    window.onscroll = () => {
      // console.info(window.scrollY);
      let { scrollY } = this.props.store;
      this.props.store.setScrollY(window.scrollY);
      if (scrollY > 1000) {
        this.props.store.setOpa(0.5);
      } else {
        this.props.store.setOpa(1);
      }
    };

  }

  // componentWillUnmount() {
  //   window.removeEventListener('scroll', this.onScrollHandle.bind(this));
  // }

  quesClick() {
    this.props.store.quesSet(true);
  }
  ques() {
    const {quesClick} = this.props.store;
    const props = {
      className: css.ques,
      onClick: () => {
        this.props.store.quesSet(false);
      }
    };
    if (quesClick) {
      return (
        <img src={ImgHuo} {...props}/>
      );
    }
  }

  musicClick() {
    this.props.store.musicSet();
  }


  render() {

    // console.log('this.props.store.scrollY', this.props.store.scrollY);

    const { endTime, isLight, testTime, opa, music } = this.props.store;
    const props = {
      opa: opa,
      isMusic: music,
      quesClick: this.quesClick.bind(this),
      // musicClick: this.musicClick.bind(this),
    };
    return (
      <div className={css.wrapper}>
        <div onClick={this.changeStatus.bind(this)} className={css.light}>
          {isLight === 'true' ? <p>关灯</p> : <p>开灯</p> }
        </div>
        {this.changeImg()}
        { Data.map((palace, index) => this.renderCell(palace, index)) }
        { endTime &&
            <img src={ImgNow} onClick={this.enter.bind(this)} className={css.imgNow}/>
        }
        { testTime && this.openMessage() }
        <TopBar {...props}/>
        {this.ques()}
      </div>
    );
  }
}
